<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  <title>Document</title>
</head>
<style>
  .demo{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
  }
</style>
<body>
  <!-- [html] 说说你对`<meta>`标签的理解 -->
  <!-- http://www.h-camel.com/show/98.html -->
  标签放在 中间，不会在网页中显示，主要是给机器以及爬虫来阅读的。

比较常用的属性有下面几个：

charset: 在 HTML5 中推荐的用法，一般设为 UTF-8 防止出现乱码。
name 与 content 的搭配使用:
name=viewport: 移动端开发使用的属性，用来设置视窗的宽度，是否允许缩放等。与 Day 10 viewport 常见设置都有哪些？ 相关
name=author: 用来设置作者，给 SEO 使用
name=description: 页面的描述，在浏览器用作书签时会显示对应的内容
name=keywords: 网页的关键字，给 SEO 使用
http-equiv 与 content 的搭配使用
refresh: 允许页面在一定时间后刷新或者重定向到另一个地址


什么是meta
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。

Meta ： 即 **元数据（Metadata）**是数据的基本信息。

元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以我们称之为“ 元数据 ”



移动端meta
1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3、禁止将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />
4、忽略对邮箱地址的识别

<meta name="format-detection" content="email=no" />
5、当网站添加到主屏幕快速启动方式，伪装webapp，可隐藏工具栏/菜单栏/地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->
6、添加到主屏幕后，全屏显示

<meta name="apple-touch-fullscreen" content="yes">
7、设置ios的safari浏览器顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->
8、添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">
9、添加智能 App 广告条 Smart App Banner
告诉浏览器这个网站对应的app，并在页面上显示下载banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
10、其他meta

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
针对苹果手机说明：
配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />
说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径

使用：该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为 5757（px）或者 Retina 可以定为 114114（px），iPad 尺寸为 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />
说明：这个 link 就是设置启动时候的界面。

使用：放置的路径和上面一样。
官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释：Meta Tags
  <script>
 
  </script>
</body>
</html>

